<!--
* @author wn
* @date 2022/05/19 11:33:21
* @description:  二级分类 排序 组件
!-->
<template>
	<div class="sub-sort">
		<div class="sort">
			<a
				href="javascript:;"
				:class="{ active: sortField === null }"
				@click="changeSort(null)"
			>
				默认排序
			</a>
			<a
				href="javascript:;"
				:class="{ active: sortField === 'publishTime' }"
				@click="changeSort('publishTime')"
			>
				最新商品
			</a>
			<a
				href="javascript:;"
				:class="{ active: sortField === 'orderNum' }"
				@click="changeSort('orderNum')"
			>
				最高人气
			</a>
			<a
				href="javascript:;"
				:class="{ active: sortField === 'evaluateNum' }"
				@click="changeSort('evaluateNum')"
			>
				评论最多
			</a>
			<a href="javascript:;" @click="changeSort('price')">
				价格排序
				<i class="arrow up" :class="{ active: sortMethod === 'asc' }" />
				<i class="arrow down" :class="{ active: sortMethod === 'desc' }" />
			</a>
		</div>
		<div class="check">
			<xtx-check-box v-model="inventory">仅显示有货商品</xtx-check-box>
			<xtx-check-box v-model="onlyDiscount">仅显示特惠商品</xtx-check-box>
		</div>
	</div>
</template>
<script>
import { reactive, toRefs, watch } from 'vue'
import { useRoute } from 'vue-router'
export default {
	name: 'SubSort',
	setup(props, { emit }) {
		// sortField  string   排序字段，取值范围：[publishTime,orderNum,price,evaluateNum]
		//    sortField            排序字段
		//      null             默认排序(为null的时候，axios不发送null字段)
		//      'publishTime'    最新商品
		//      'orderNum'       最高人气
		//      'evaluateNum'    评论最多
		//      'price'          价格
		// sortMethod string   价格排序规则
		//         asc            价格为正序
		//         desc           价格为倒序  默认
		// 数据 定义为  条件4个 + 价格 + 有货 + 特惠
		const sortParams = reactive({
			inventory: false, // 是否有库存
			onlyDiscount: false, // 只显示特惠
			sortField: null, // 排序字段
			sortMethod: null, // 当排序字段为价格时，价格的排序方式
		})
		const changeSort = v => {
			// 改变排序字段
			sortParams.sortField = v
			// 当排序字段为价格时，改变价格排序方式
			if (v === 'price') {
				// 第一次点击  设置为 desc
				if (sortParams.sortMethod === null) sortParams.sortMethod = 'desc'
				else {
					sortParams.sortMethod =
						sortParams.sortMethod === 'asc' ? 'desc' : 'asc'
				}
			} else sortParams.sortMethod = null // 取消价格的高亮效果
		}

		// 路由发生变化，筛选条件重设为默认值
		const route = useRoute()
		watch(
			() => route.params.id,
			newId => {
				if (route.path === `/category/sub/${newId}`) {
					sortParams.inventory = false
					sortParams.onlyDiscount = false
					sortParams.sortField = null
					sortParams.sortMethod = null
				}
			}
		)
		// 观察数据的变化  发送事件给父组件  刷新数据
		watch(sortParams, v => emit('sortChange', v))

		return { ...toRefs(sortParams), changeSort }
	},
}
</script>
<style scoped lang="less">
.sub-sort {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 80px;
	a {
		position: relative;
		display: inline-block;
		height: 30px;
		line-height: 30px;
		border: 1px solid #e4e4e4;
		padding: 0 20px;
		margin-right: 20px;
		color: #999;
		border-radius: 2px;
		transition: all 0.3s;
		&.active {
			background: @xtxColor;
			border-color: @xtxColor;
			color: #fff;
		}
		// 自己 css  画 三角形
		.arrow {
			position: absolute;
			right: 8px;
			border: 5px solid transparent;
			&.up {
				top: 3px;
				border-bottom-color: #bbb;
				&.active {
					border-bottom-color: @xtxColor;
				}
			}
			&.down {
				top: 15px;
				border-top-color: #bbb;
				&.active {
					border-top-color: @xtxColor;
				}
			}
		}
	}
	.check {
		.xtx-checkbox {
			margin-left: 20px;
			color: #999;
		}
	}
}
</style>
